<template>
  <div id="Personal_Data">
    <el-form label-position="right" label-width="150px" id="Personal_Data_form">
      <el-form-item label="*昵称">
        <el-input
          @keyup.enter.native="onSubmit()"
          v-model="information.nickName"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input
          @keyup.enter.native="onSubmit()"
          v-model="information.realName"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="*头像">
        <el-upload
          accept=".jpg,.jpeg,.png"
          action="#"
          :show-file-list="false"
          :on-change="changeHandle"
          :auto-upload="true"
          :http-request="upload_avatar"
        >
          <el-avatar
            fit="fill"
            :size="50"
            :src="information.avatarUrl"
          ></el-avatar>
        </el-upload>
      </el-form-item>
      <el-form-item label="学号">
        <el-input
          @keyup.enter.native="onSubmit()"
          v-model="information.schoolId"
          size="small"
        ></el-input
      ></el-form-item>
      <!-- <el-form-item label="微信号"> </el-form-item> -->
      <el-form-item label="用户名">
        <el-input
          @keyup.enter.native="onSubmit()"
          v-model="information.username"
          size="small"
        ></el-input
      ></el-form-item>
      <!-- <el-form-item label="密码">
        <el-input v-model="information.nickName" size="small"></el-input
      ></el-form-item> -->
      <el-form-item label="性别">
        <el-radio v-model="information.status" :label="1">男</el-radio>
        <el-radio v-model="information.status" :label="2">女</el-radio>
      </el-form-item>
      <el-form-item label="手机号">
        <span>{{ information.phone }}</span>
      </el-form-item>

      <el-button id="Submit_personal" type="button" @click="onSubmit"
        >提交</el-button
      >
    </el-form>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
export default {
  props: {},
  components: {},
  data() {
    return {
      information: "",
      imgfile: "",
    };
  },
  methods: {
    async get_personal_data() {
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/userInfor/getUserInfor",
      });
      console.log(res);
      this.information = res.msg;
    },

    changeHandle(file) {
      this.imgFile = file;
    },
    async upload_avatar() {
      // 创建COS实例  获取签名
      //这里写你们后端提供的请求接口即可，这里调用的接口是为了获取tmpSecretId、tmpSecretKey、sessionToken、expiredTime这些值
      const { data: res1 } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/upload/getSecretKey",
      });

      const data = res1.credentials;
      const cos = new COS({
        // 必选参数
        getAuthorization: (options, callback) => {
          const obj = {
            TmpSecretId: data.tmpSecretId,
            TmpSecretKey: data.tmpSecretKey,
            XCosSecurityToken: data.sessionToken,
            StartTime: res1.startTime, // 时间戳，单位秒，如：1580000000
            ExpiredTime: res1.expiredTime, // 时间戳，单位秒，如：1580000900
          };
          callback(obj);
        },
      });

      // 上传图片  其中Bucket 和 Region找你们负责人拿，Bucke和Region是由公司负责人使用公司账户，登入腾讯云，获取回来的。
      //key 在前面加上路径写法可以生成文件夹
      cos.putObject(
        {
          Bucket: "fuhuaqi-1311373154" /* 必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          Key: "/avatat/" + new Date().getTime() + this.imgFile.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: this.imgFile.raw, // 上传文件对象
          onProgress: (progressData) => {},
        },
        (err, data) => {
          // 将上传后的封面进行路径拼接保存到本地

          const url = "https://" + data.Location;
          console.log(url.substr(56, url.length - 56));
          this.information.avatarUrl = url;
        }
      );
    },

    async onSubmit() {
      const self = this;
      console.log(this.information);
      if (this.information.nickName == "" || this.information.avatarUrl == "") {
        this.$message.error("昵称和头像不能为空");
        return;
      }
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/userInfor/addUserInfor",
        data: {
          nickName: self.information.nickName,
          realName: self.information.realName,
          avatarUrl: self.information.avatarUrl,
          schoolId: self.information.schoolId,
          username: self.information.username,
          status: self.information.status,
          phone: self.information.phone,
        },
      });
      // console.log(res);
      if (res.code != 200) {
        this.$message.error("提交失败");
        return;
      }
      this.$message.success(res.msg);
      this.get_personal_data();

      window.localStorage.setItem("name", this.information.nickName);
      window.localStorage.setItem("avatarUrl", this.information.avatarUrl);
      this.$emit("get_name_url", this.information);
    },
  },
  created() {
    this.get_personal_data();
  },
};
</script>

<style lang="less" scoped>
#Personal_Data {
  display: flex;

  height: 100%;
  width: 100%;
  //   background-color: rgb(133, 13, 13);
}
#Personal_Data_form {
  margin: auto;
  margin-top: 3%;
  height: 90%;
  display: flex;
  flex-direction: column;
  //   background-color: rgb(177, 43, 43);
  .el-form-item {
    display: flex;
    flex-direction: row;
    height: 8%;
    .el-form-item__label {
      // font-size: 25px;
      // line-height: 60px;
      font-weight: bold;
      width: 150px !important;
      // text-align: center;
      // float: right;
    }
    .el-input {
      width: 300px;

      .el-input__inner {
        height: 60px;
        font-size: 19px;
      }
    }
  }
}

#Submit_personal {
  width: 200px;
  border: none;
  height: 50px;
  // display: flex;
  margin: auto;
  //   margin-top: 20px;
  background-color: rgb(0, 110, 255);
  font-size: 20px;
  color: white;
  font-weight: bolder;
  border-radius: 5%;
}
</style>